<template>
	<view class="login-info">
		<view class="login-info-bg">
			<image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/login-info-bg.png"
				mode="aspectFill"></image>
		</view>
		<view class="login-info-text">
			<view class="login-info-text-title">
				欢迎来到在一起
			</view>
			<view class="" style="position: relative;top: 20rpx;">
				请填写一下基础信息
			</view>
		</view>
		<view class="login-info-main">
			<view class="login-info-main-title">
				填写信息
			</view>
			<view class="login-info-main-item">
				<mine-personalitem height="120" @clickArrow="clickArrow('name')" :showArrow="false" title="昵称"
					placeholder="请输入" :value="inputVal.nickname" :enableInput="true" @change="changeInput()">
				</mine-personalitem>
				<mine-personalitem height="120" @clickArrow="clickArrow('sex')" :showArrow="true" title="性别"
					placeholder="请选择" :value="sex" :enableInput="false">
				</mine-personalitem>
				<mine-personalitem height="120" @clickArrow="clickArrow('age')" :showArrow="true" title="年龄"
					placeholder="请选择" :value="age" :enableInput="false">
				</mine-personalitem>
				<mine-personalitem height="120" @clickArrow="clickArrow('city')" :showArrow="true" title="所在城市"
					placeholder="请选择" :value="inputVal.home" :enableInput="false">
				</mine-personalitem>
			</view>
			<view class="login-info-main-btn " @click="confirm()">
				<view class="btns">
					<image class="btns-img"
						src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/576x88.png" mode="">
					</image>
					<view class="btns-con">
						完成
					</view>
				</view>
			</view>
		</view>
		<!-- 性别 -->
		<u-picker mode="selector" v-model="sexshow" :range="sexList" range-key="label" :default-selector="cityIndex"
			@confirm="changeSelect('sex',$event)">
		</u-picker>
		<!-- 年龄 -->
		<u-picker mode="selector" v-model="ageshow" :range="ageList" range-key="label" :default-selector="cityIndex"
			@confirm="changeSelect('age',$event)">
		</u-picker>
		<!-- 所在城市 -->
		<u-picker mode="selector" v-model="cityshow" :range="cityList" range-key="name" :default-selector="cityIndex"
			@columnchange="columnchange" @confirm="changeSelect('city',$event)">
		</u-picker>
	</view>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	import minePersonalitem from '../../components/mine-personalitem/mine-personalitem.vue'
	// import areas from '@/utils/area.js'
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: {},
		// 局部注册的组件,import引入的组件需要注入到对象中才能使用
		components: {
			minePersonalitem
		},
		// 组件状态值
		data() {
			return {
				sexshow: false,
				ageshow: false,
				cityshow: false,
				sexList: [{
						value: 0,
						label: '女'
					},
					{
						value: 1,
						label: '男'
					}
				],
				ageList: [{
					value: 18,
					label: '18岁'
				}, {
					value: 19,
					label: '19岁'
				}, {
					value: 20,
					label: '20岁'
				}, {
					value: 21,
					label: '21岁'
				}, {
					value: 22,
					label: '22岁'
				}, {
					value: 23,
					label: '23岁'
				}, {
					value: 24,
					label: '24岁'
				}, {
					value: 25,
					label: '25岁'
				}, {
					value: 26,
					label: '26岁'
				}, {
					value: 27,
					label: '27岁'
				}, {
					value: 28,
					label: '28岁'
				}, {
					value: 29,
					label: '29岁'
				}, {
					value: 30,
					label: '30岁'
				}, {
					value: 31,
					label: '31岁'
				}, {
					value: 32,
					label: '32岁'
				}, {
					value: 33,
					label: '33岁'
				}, {
					value: 34,
					label: '34岁'
				}, {
					value: 35,
					label: '35岁'
				}, {
					value: 36,
					label: '36岁'
				}, {
					value: 37,
					label: '37岁'
				}, {
					value: 38,
					label: '38岁'
				}, {
					value: 39,
					label: '39岁'
				}, {
					value: 40,
					label: '40岁'
				}, {
					value: 41,
					label: '41岁'
				}, {
					value: 42,
					label: '42岁'
				}, {
					value: 43,
					label: '43岁'
				}, {
					value: 44,
					label: '44岁'
				}, {
					value: 45,
					label: '45岁'
				}, {
					value: 46,
					label: '46岁'
				}, {
					value: 47,
					label: '47岁'
				}, {
					value: 48,
					label: '48岁'
				}, {
					value: 49,
					label: '49岁'
				}, {
					value: 50,
					label: '50岁'
				}, {
					value: 51,
					label: '51岁'
				}, {
					value: 52,
					label: '52岁'
				}, {
					value: 53,
					label: '53岁'
				}, {
					value: 54,
					label: '54岁'
				}, {
					value: 55,
					label: '55岁'
				}, {
					value: 56,
					label: '56岁'
				}, {
					value: 57,
					label: '57岁'
				}, {
					value: 58,
					label: '58岁'
				}, {
					value: 59,
					label: '59岁'
				}, {
					value: 60,
					label: '60岁'
				}, ],
				// addressList: [
				// 	[],
				// 	[],
				// 	[]
				// ],
				provinceList: [],
				cityList: [],
				sexIndex: 0,
				ageIndex: 0,
				province: '',
				city: '',
				nickname: '',
				sex: '',
				age: '',
				home: '',
				cityIndex: [],
				location: {
					lat: '',
					lng: ''
				},
				inputVal: {
					nickname: '',
					sex: '',
					age: '',
					home: ''
				}
			}
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			clickArrow(type) {
				if (type == 'sex') {
					this.sexshow = true
				} else if (type == 'age') {
					this.ageshow = true
				} else if (type == 'city') {
					// this.addressList = []
					// this.cityIndex = [0, 0, 0]
					// this.getProvince()
					this.cityshow = true
				}
			},
			//获取当前位置
			getLocation() {
				let location = {
					lat: 0,
					lng: 0,
				}
				// console.log(location, 'location')
				let that = this
				uni.getLocation({
					success(res) {
						// console.log(res, 'res')
						location.lat = res.latitude
						location.lng = res.longitude
						// console.log(res.latitude, res.longitude, 'res.latitude,res.longituderes.latitude,res.longitude')
						// 根据经纬度获取城市
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/',
							data: {
								location: `${res.latitude},${res.longitude}`,
								key: 'LNKBZ-7K2K4-FBTUF-F4EDL-DL3CH-T4FDB'
							},
							success(res) {
								console.log(res, 'res', 'https://apis.map.qq.com/ws/geocoder/v1/')
								// that.city = res.data.result.ad_info.city
								that.provinceList.filter(item => {
									// console.log(item.name, res.data.result.ad_info.province, 'item.name, res.data.result.ad_info.city')
									if (item.name === res.data.result.ad_info.province) {
										that.city = res.data.result.ad_info.city
										that.province = res.data.result.ad_info.province
										// that.getArea(item)
										that.getCity(item)
									}
								})
							}
						})
						that.location = location
					},
					fail(err) {
						console.log(err, 'err')
						that.location = location
						// that.getList()
						if (err.errMsg === 'getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化') {
							uni.showToast({
								title: '请勿频繁定位',
								icon: 'none'
							})
						}
						if (err.errMsg === 'getLocation:fail auth deny') {
							// 未授权
							uni.showToast({
								title: '无法定位，请重新获取位置信息',
								icon: 'none'
							})
							authDenyCb && authDenyCb()
							self.isLocated = false
						}
						if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
							uni.showModal({
								content: '请开启手机定位服务',
								showCancel: false
							})
						}
					}
				})
			},
			// 获取省
			getProvince() {
				this.$http('config.area', {}, '').then(res => {
					// console.log(res, 'res')
					this.provinceList = res.data
					this.getLocation() // 获取当前位置
				})
			},
			// 获取地区
			getCity(item) {
				this.$http('config.area', {
					pid: item.id
				}, '').then(res => {
					// console.log(res, 'res')
					this.cityList = res.data
					this.cityList.unshift({
						id: '',
						name: '不限'
					})
					this.cityList.filter((item, index) => {
						if (item.name === this.city) {
							this.cityIndex = [index]
							// this.getArea(item)
						}
					})
				})
			},
			changeInput(e) {
				this.inputVal.nickname = e
			},
			changeSelect(type, e) {
				console.log('asldkjlkj', e)
				if (type == 'sex') {
					this.sexIndex = (e[0] == undefined ? 0 : e[0])
					this.sexList.filter((item, i) => {
						if (i == this.sexIndex) {
							this.sex = item.label
							this.inputVal.sex = item.value
						}
					})
				} else if (type == 'age') {
					this.ageIndex = (e[0] == undefined ? 0 : e[0])
					this.ageList.filter((item, i) => {
						if (i == this.ageIndex) {
							this.age = item.label
							this.inputVal.age = item.value
						}
					})
				} else if (type == 'city') {
					this.cityIndex = (e[0] == undefined ? 0 : e[0])
					this.cityList.filter((item, i) => {
						if (i == this.cityIndex) {
							// this.cityIndex = item.label
							this.home = item.name
							this.inputVal.home = item.id
						}
					})
					// this.cityIndex = []
					// this.inputVal.home = []
					// e.map((l, v) => {
					// 	this.addressList.map((item, index) => {
					// 		if (index == v) {
					// 			console.log(item[l], index, l, v, '1111-----')
					// 			this.cityIndex.push(item[l].id)
					// 			this.inputVal.home.push(item[l].name)
					// 		}
					// 	})
					// })
					// this.cityIndex = [e.province.value, e.city.value, e.area.value]
					// this.inputVal.home = e.province.label + e.city.label + e.area.label
					// console.log(this.home)
				}

				this.$forceUpdate()
			},
			confirm() {
				let obj = {
					token: uni.getStorageSync('token'),
					nickname: this.inputVal.nickname,
					sex: this.inputVal.sex,
					age: this.inputVal.age,
					home: this.cityIndex.toString()
				}
				console.log(obj)
				this.$http('user.information', obj, '').then(res => {
					console.log(res, 'aslkdjkl')
					this.$Router.replace({
						path: '/pages/index/index'
					})
				})
			},
			getInfo() {
				this.$http('user.informationInfo', {
					token: uni.getStorageSync('token')
				}, '').then(res => {
					console.log(res, 'informationInfo')
				})
			},
			// down() {
			// 	this.$Router.replace({
			// 		path: '/pages/index/index'
			// 	})
			// },
			// columnchange(e) {
			// 	console.log(e, 'eeecolumnchangecolumnchange')
			// 	if (e.column == 0) {
			// 		this.addressList[0].filter((item, index) => {
			// 			if (index == e.index) {
			// 				this.getCity(item)
			// 				return true
			// 			}
			// 		})
			// 	} else if (e.column == 1) {
			// 		this.addressList[1].filter((item, index) => {
			// 			if (index == e.index) {
			// 				this.getArea(item)
			// 				return true
			// 			}
			// 		})
			// 	}
			// },
			// // 获取省
			// getProvince() {
			// 	this.$http('config.area', {}, '').then(res => {
			// 		// console.log(res, 'res')
			// 		// this.provinceList = res.data
			// 		this.addressList[0] = res.data
			// 		this.getCity(res.data[0])
			// 		// this.getLocation() // 获取当前位置
			// 	})
			// },
			// // 获取地区
			// getCity(item) {
			// 	this.$http('config.area', {
			// 		pid: item.id
			// 	}, '').then(res => {
			// 		// console.log(res, 'res')
			// 		// this.cityList = res.data
			// 		this.addressList[1] = res.data
			// 		this.getArea(res.data[0])
			// 		// this.cityList.unshift({
			// 		// 	id: '',
			// 		// 	name: '不限'
			// 		// })
			// 		// this.cityList.filter((item, index) => {
			// 		// 	if (item.name === this.city) {
			// 		// 		this.cityIndex = [index]
			// 		// 		this.getArea(item)
			// 		// 	}
			// 		// })
			// 	})
			// },
			// // 获取区域
			// getArea(item) {
			// 	this.$http('config.area', {
			// 		pid: item.id
			// 	}, '').then(res => {
			// 		console.log(res, 'res')
			// 		this.addressList[2] = res.data
			// 		// this.areaList.unshift({
			// 		// 	id: '',
			// 		// 	name: '不限'
			// 		// })
			// 		// console.log(this.areaList, 'this.areaList')
			// 		console.log(this.addressList, 'addressListaddressListaddressListaddressList')
			// 		this.$forceUpdate()
			// 	})
			// },
		},
		// 以下是生命周期钩子   注：没用到的钩子请自行删除
		/**
		 * 在实例初始化之后，组件属性计算之前，如data属性等
		 */
		beforeCreate() {},
		/**
		 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
		 */
		created() {
			// console.log(areas, 'areasareas')
			// this.cityList = areas
			this.getInfo()
			this.getProvince() // 获取省份
		},
		/**
		 * 在挂载开始之前被调用：相关的 render 函数首次被调用。
		 */
		beforeMount() {},
		/**
		 * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
		 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
		 */
		mounted() {},
		/**
		 * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
		 * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
		 */
		beforeUpdate() {},
		/**
		 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
		 * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
		 */
		updated() {},
		/**
		 * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
		 */
		activated() {},
		/**
		 * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
		 */
		deactivated() {},
		/**
		 * 实例销毁之前调用。在这一步，实例仍然完全可用。
		 */
		beforeDestroy() {},
		/**
		 * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
		 * 所有的事件监听器会被移除，所有的子实例也会被销毁。
		 */
		destroyed() {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<style scoped lang="scss">
	.login-info {
		position: relative;
		width: 100%;
		height: 100%;

		&-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&-text {
			font-size: 28rpx;
			color: #FCFDFF;
			position: relative;
			left: 32rpx;
			top: 200rpx;

			&-title {
				font-size: 32rpx;
			}
		}

		&-main {
			height: calc(100% - 312rpx);
			margin-top: 312rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 32rpx;

			&-title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #2E3033;
				padding-top: 40rpx;
				text-align: center;
			}

			&-btn {
				position: absolute;
				bottom: calc(40rpx + constant(safe-area-inset-bottom));
				bottom: calc(40rpx + env(safe-area-inset-bottom));
				left: 50%;
				transform: translateX(-50%);

				.btns {
					width: 576rpx;
					height: 88rpx;
					position: relative;

					&-img {
						width: 100%;
						height: 100%;
					}

					&-con {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FAFCFF;
						line-height: 88rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>